<template>
    <div class="dataEntry" id="dataEntry">
        <Layout>
            <Header class="header">
                <Row>
                    <Col :span="24">
                        <div>
                            <span class="border-left"></span>
                            用户录入
                        </div>
                    </Col>
                </Row>
            </Header>
            <Content class="content">
                <div class="card-add">
                    <div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
                        <div class="ivu-card-head">
                            <p data-v-57b29fc1="">用户数据录入</p>
                        </div>
                        <div class="ivu-card-body"> 
                            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="160" style="width:100%">
                                <FormItem label="用户账号" prop="account">
                                    <Input style="width: 50%" v-model="formValidate.account"></Input>
                                </FormItem>
                                <FormItem label="众湖钱包" prop="balance">
                                    <Input style="width: 50%" v-model="formValidate.balance"></Input>
                                </FormItem>
                                <FormItem label="工资" prop="wages">
                                    <Input style="width: 50%" v-model="formValidate.wages"></Input>
                                </FormItem>
                                <FormItem label="短期收益" prop="my_profit">
                                    <Input style="width: 50%" v-model="formValidate.my_profit"></Input>
                                </FormItem>
                                <FormItem label="绑定关系" prop="parent_id">
                                    <Input v-model="formValidate.parent_id" disabled style="width: 10%;box-sizing: border-box"></Input>
                                    <Input v-model="searchAccount" placeholder="请输入上级账号进行检索，如无上级关系请勿进行操作" style="width: 40%;box-sizing: border-box">
                                        <Icon type="ios-search" slot="suffix" @click="search" />
                                    </Input>
                                </FormItem>

                                <FormItem label="角色设置">
                                    <el-checkbox-group size="mini" v-model="selectedRoles" @change="roleChange">
                                        <el-checkbox border label="省级代理" >省级代理</el-checkbox>
                                        <el-checkbox border label="市级代理" >市级代理</el-checkbox>
                                        <el-checkbox border label="县级代理" >县级代理</el-checkbox>
                                        <el-checkbox border label="合伙人" >合伙人</el-checkbox>
                                        <el-checkbox border label="个人代理" >个人代理</el-checkbox>
                                        <el-checkbox border label="推广员" >推广员</el-checkbox>
                                    </el-checkbox-group>
                                </FormItem>

                                <div class="ivu-form-item hidden fead" :class="isProviceShow ? 'show' : ''">
                                    <label class="ivu-form-item-label" style="width: 160px;">代理区域(省级)</label>
                                    <div class="ivu-form-item-content  u_content" style="margin-left: 120px;">
                                        <div class="u_input_box" v-for="(item,i) in formData.province" :key="i">
                                            <Cascader class="u_input" :data="province" filterable v-model="item.address"></Cascader>
                                            <Input style="width:100px;margin-right: 10px" placeholder="省级提成" v-model="item.rate">
                                                <span slot="append">%</span>
                                            </Input>
                                            <Input style="width:100px;margin-right: 10px" placeholder="省级收益" v-model="item.balance">
                                            </Input>
                                            <Input style="width:100px;margin-right: 10px" placeholder="推荐人收益" v-model="item.rec_balance">
                                            </Input>
                                            <Input style="width:100px;margin-right: 10px" placeholder="订单总额" v-model="item.region_order_total">
                                            </Input>
                                            <DatePicker @on-change="dateSet($event,item)" :options="options" :start-date="new Date(new Date() - (30*24*60*60*1000))"
                                                type="date" placement="bottom" format="yyyy-MM-dd" placeholder="成为代理时间" style="width: auto">
                                            </DatePicker>
                                            <div class="addArea addBtn" v-show="i != formData.province.length-1" @click="minuProvince(i)">-</div>
                                        </div>
                                        <div class="addArea addBtn" @click="addProvince">+</div>
                                    </div>
                                </div>

                                <div class="ivu-form-item hidden fead" :class="isTownShow ? 'show' : ''">
                                    <label class="ivu-form-item-label" style="width: 160px;">代理区域(市级)</label>
                                    <div class="ivu-form-item-content  u_content" style="margin-left: 120px;">
                                        <div class="u_input_box" v-for="(item,i) in formData.town" :key="i">
                                            <Cascader class="u_input" :data="town" :load-data="loadTownData" filterable v-model="formData.town[i].address"></Cascader>
                                            <Input style="width:100px;margin-right: 10px" placeholder="市级提成" v-model="item.rate">
                                                <span slot="append">%</span>
                                            </Input>
                                            <Input style="width:100px;margin-right: 10px" placeholder="市级收益" v-model="item.balance">
                                            </Input>
                                            <Input style="width:100px;margin-right: 10px" placeholder="推荐人收益" v-model="item.rec_balance">
                                            </Input>
                                            <Input style="width:100px;margin-right: 10px" placeholder="订单总额" v-model="item.region_order_total">
                                            </Input>
                                            <DatePicker @on-change="dateSet($event,item)" :options="options" :start-date="new Date(new Date() - (30*24*60*60*1000))"
                                                type="date" placement="bottom" format="yyyy-MM-dd" placeholder="成为代理时间" style="width: auto">
                                            </DatePicker>
                                            <div class="addArea addBtn" v-show="i != formData.town.length-1" @click="minuTown(i)">-</div>
                                        </div>
                                        <div class="addArea addBtn" @click="addTown">+</div>
                                    </div>
                                </div>

                                <div class="ivu-form-item hidden fead" :class="isAreaShow ? 'show' : ''">
                                    <label class="ivu-form-item-label" style="width: 160px;">代理区域(县级)</label>
                                    <div class="ivu-form-item-content u_content" style="margin-left: 120px;">
                                        <div class="u_input_box" v-for="(item,i) in formData.area" :key="i">
                                            <Cascader class="u_input" :data="area" :load-data="loadAreaData" filterable v-model="formData.area[i].address"></Cascader>
                                            <Input style="width:100px;margin-right: 10px" placeholder="县级提成" v-model="item.rate">
                                                <span slot="append">%</span>
                                            </Input>
                                            <Input style="width:100px;margin-right: 10px" placeholder="县级收益" v-model="item.balance">
                                            </Input>
                                            <Input style="width:100px;margin-right: 10px" placeholder="推荐人收益" v-model="item.rec_balance">
                                            </Input>
                                            <Input style="width:100px;margin-right: 10px" placeholder="订单总额" v-model="item.region_order_total">
                                            </Input>
                                            <DatePicker @on-change="dateSet($event,item)" :options="options" :start-date="new Date(new Date() - (30*24*60*60*1000))"
                                                type="date" placement="bottom" format="yyyy-MM-dd" placeholder="成为代理时间" style="width: auto">
                                            </DatePicker>
                                            <div class="addArea addBtn" v-show="i != formData.area.length-1" @click="minuArea(i)">-</div>
                                        </div>
                                        <div class="addArea addBtn" @click="addArea">+</div>
                                    </div>
                                </div>

                                <div class="ivu-form-item fead hidden" :class="isRateShow ? 'show' : ''">
                                    <label class="ivu-form-item-label" style="width: 160px;">合伙人</label>
                                    <div class="ivu-form-item-content u_content" style="margin-left: 120px;">
                                        <Input v-model="formData.partner.rate" style="width:100px;margin-right: 10px" placeholder="合伙人提成">
                                            <span slot="append">%</span>
                                        </Input>
                                        <Input style="width:100px;margin-right: 10px" placeholder="合伙人收益" v-model="formData.partner.balance">
                                        </Input>
                                        <Input style="width:100px;margin-right: 10px" placeholder="推荐人收益" v-model="formData.partner.rec_balance">
                                        </Input>
                                        <Input style="width:100px;margin-right: 10px" placeholder="订单总额" v-model="formData.partner.region_order_total">
                                        </Input>
                                        <DatePicker @on-change="dateSet($event,formData.partner)" :options="options" :start-date="new Date(new Date() - (30*24*60*60*1000))"
                                            type="date" placement="bottom" format="yyyy-MM-dd" placeholder="成为合伙人时间" style="width: auto">
                                        </DatePicker>
                                    </div>
                                </div>

                                <div class="ivu-form-item fead hidden" :class="isSelfShow ? 'show' : ''">
                                    <label class="ivu-form-item-label" style="width: 160px;">个人代理</label>
                                    <div class="ivu-form-item-content u_content" style="margin-left: 120px;">
                                        <Input v-model="formData.self.rate" style="width:100px;margin-right: 10px" placeholder="个人代理提成">
                                            <span slot="append">%</span>
                                        </Input>
                                        <Input style="width:100px;margin-right: 10px" placeholder="个人代理收益" v-model="formData.self.balance">
                                        </Input>
                                        <Input style="width:100px;margin-right: 10px" placeholder="推荐人收益" v-model="formData.self.rec_balance">
                                        </Input>
                                        <Input style="width:100px;margin-right: 10px" placeholder="订单总额" v-model="formData.self.region_order_total">
                                        </Input>
                                        <DatePicker @on-change="dateSet($event,formData.self)" :options="options" :start-date="new Date(new Date() - (30*24*60*60*1000))"
                                            type="date" placement="bottom" format="yyyy-MM-dd" placeholder="成为代理时间" style="width: auto">
                                        </DatePicker>
                                    </div>
                                </div>

                                <div class="ivu-form-item fead hidden" :class="isPromoteShow ? 'show' : ''">
                                    <label class="ivu-form-item-label" style="width: 160px;">推广员</label>
                                    <div class="ivu-form-item-content u_content" style="margin-left: 120px;">
                                        <Input v-model="formData.promote.rate" style="width:100px;margin-right: 10px" placeholder="推广员提成">
                                            <span slot="append">%</span>
                                        </Input>
                                        <Input style="width:100px;margin-right: 10px" placeholder="推广员收益" v-model="formData.promote.balance">
                                        </Input>
                                        <Input style="width:100px;margin-right: 10px" placeholder="推荐人收益" v-model="formData.promote.rec_balance">
                                        </Input>
                                        <Input style="width:100px;margin-right: 10px" placeholder="订单总额" v-model="formData.promote.region_order_total">
                                        </Input>
                                        <DatePicker @on-change="dateSet($event,formData.promote)" :options="options" :start-date="new Date(new Date() - (30*24*60*60*1000))"
                                            type="date" placement="bottom" format="yyyy-MM-dd" placeholder="成为推广员时间" style="width: auto">
                                        </DatePicker>
                                    </div>
                                </div>

                                <FormItem class="right">
                                    <!-- <Button type="primary" @click="handleSubmit('formValidate')">提交</Button> -->
                                    <Button type="primary" @click="submit">提交</Button>
                                    <!-- <Button @click="() => {$refs.formValidate.resetFields()}" style="margin-left: 8px">重置</Button> -->
                                </FormItem>
                            </Form>
                        </div>
                    </div>
                </div>
            </Content>

            <Modal
                title="检索结果"
                v-model="searchModel"
                :mask-closable="false"
                @on-ok="addID">
                <p>账号：{{searchAccount}}</p>
                <p>姓名：{{searchName}}</p>
                <p>ID: {{searchID}}</p>
            </Modal>

            <Footer>
                <p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
            </Footer>
        </Layout>
    </div>
    
</template>

<script>
    import * as api from '@/api/api';
    import store from "../../../store/SessionStorageStore";
    export default {
        data(){
            return {
                host: window.location.host,
                loading: this.$store.state,
                options: {
                    disabledDate(date) {
                        return date && date.valueOf() > Date.now();
                    }
                }, //日期选择范围配置
                formValidate: {
                    account: '',
                    balance: '',
                    wages: '',
                    my_profit: '',
                    parent_id: '0'
                },
                ruleValidate: {
                    account: [
                        { required: true, message: '请填写用户账号', trigger: 'blur' }
                    ],
                    balance: [
                        { required: true, message: '请填写用户众湖钱包余额', trigger: 'blur' }
                    ],
                    wages: [
                        { required: true, message: '请填写用户工资余额', trigger: 'blur' }
                    ],
                    my_profit: [
                        { required: true, message: '请填写用户短期收益', trigger: 'blur' }
                    ]
                },
                searchAccount: '',
                searchName: '',
                searchID: '',
                searchModel: false,
                selectedRoles: [],
                province: [], //省
                town: [], //市
                area: [], //区县
                isAreaShow: false,
                isTownShow: false,
                isProviceShow: false,
                isRateShow: false,
                isSelfShow: false,
                isPromoteShow: false,
                formData: {
                    area: [],
                    town: [],
                    province: [],
                    partner: {
                        rate: '',
                        city_id: '10002',
                        territory: '中国',
                        role_id: '2',
                        balance: '',
                        rec_balance: '',
                        region_order_total: '',
                        agent_time: ''
                    },
                    self: {
                        rate: '',
                        city_id: '10006',
                        territory: '中国',
                        role_id: '6',
                        balance: '',
                        rec_balance: '',
                        region_order_total: '',
                        agent_time: ''
                    },
                    promote: {
                        rate: '',
                        city_id: '10009',
                        territory: '中国',
                        role_id: '9',
                        balance: '',
                        rec_balance: '',
                        region_order_total: '',
                        agent_time: ''
                    }
                },
                body: null
            }
        },

        created() {

        },

        mounted(){
            this.getProvince()
        },

        computed: {

        },

        watch: {
            
        },
        
        methods: {
            submit() {
                this.$refs.formValidate.validate((valid) => {
                    if (valid) {
                        if(!this.bodySet()) {
                            return false;
                        };
                        this.loading.isLoading = true;
                        let body = this.body;
                        api.dataEntry(body).then(res => {
                            this.loading.isLoading = false;
                            if(res.data.code === 200) {
                                this.$Notice.success({
                                    title: '提示',
                                    desc: '录入成功！'
                                });
                            }else {
                                this.$Notice.error({
                                    title: '错误',
                                    desc: res.data.msg,
                                });
                            }
                        }).catch(err => {
                            this.loading.isLoading = false;
                            this.$Notice.error({
                                title: '错误',
                                desc: '服务器开小差了，请稍后再试！',
                            });
                            console.log(err)
                        })
                    }
                })
                
            },

            bodySet() {
                var body = {...this.formValidate};
                if(this.selectedRoles.length > 0) {
                    var role_info = [];
                    let roles = this.selectedRoles.join(',');
                    let re1 = new RegExp('省级代理');
                    let re2 = new RegExp('市级代理');
                    let re3 = new RegExp('县级代理');
                    let re4 = new RegExp('合伙人');
                    let re5 = new RegExp('个人代理');
                    let re6 = new RegExp('推广员');
                    if(re1.test(roles)) {
                        for (const item of this.formData.province) {
                            let one = {...item};
                            try {
                                one.city_id = item.address[0].split(',')[1];
                                one.territory = item.address[0].split(',')[0];
                                role_info.push(one)
                            } catch(err) {
                                this.$Notice.error({
                                    title: '错误',
                                    desc: '请选择代理区域',
                                });
                                return false;
                            }
                            one.rate = one.rate || '0';
                            one.balance = one.balance || '0';
                            one.rec_balance = one.rec_balance || '0';
                            one.region_order_total = one.region_order_total || '0';
                            one.agent_time = one.agent_time || '2018-12-12 00:00:00';
                            role_info.push(one)
                        }
                    }
                    if(re2.test(roles)) {
                        for (const item of this.formData.town) {
                            let one = {...item};
                            try {
                                one.city_id = item.address[1].split(',')[1];
                                one.territory = item.address[0] + '/' + item.address[1].split(',')[0];
                            } catch(err) {
                                this.$Notice.error({
                                    title: '错误',
                                    desc: '请选择代理区域',
                                });
                                return false;
                            }
                            one.rate = one.rate || '0';
                            one.balance = one.balance || '0';
                            one.rec_balance = one.rec_balance || '0';
                            one.region_order_total = one.region_order_total || '0';
                            one.agent_time = one.agent_time || '2018-12-12 00:00:00';
                            role_info.push(one)
                        }
                    }
                    if(re3.test(roles)) {
                        for (const item of this.formData.area) {
                            let one = {...item};
                            try {
                                one.city_id = item.address[2].split(',')[1];
                                one.territory = item.address[0] + '/' + item.address[1] + '/' + item.address[2].split(',')[0];
                            } catch(err) {
                                this.$Notice.error({
                                    title: '错误',
                                    desc: '请选择代理区域',
                                });
                                return false;
                            }
                            one.rate = one.rate || '0';
                            one.balance = one.balance || '0';
                            one.rec_balance = one.rec_balance || '0';
                            one.region_order_total = one.region_order_total || '0';
                            one.agent_time = one.agent_time || '2018-12-12 00:00:00';
                            role_info.push(one)
                        }
                    }
                    if(re4.test(roles)) {
                        let one = {...(this.formData.partner)};
                        // let one = this.formData.partner;
                        one.rate = one.rate || '0';
                        one.balance = one.balance || '0';
                        one.rec_balance = one.rec_balance || '0';
                        one.region_order_total = one.region_order_total || '0';
                        one.agent_time = one.agent_time || '2018-12-12 00:00:00';
                        role_info.push(one);
                    }
                    if(re5.test(roles)) {
                        let one = {...(this.formData.self)};
                        // let one = this.formData.self;
                        one.rate = one.rate || '0';
                        one.balance = one.balance || '0';
                        one.rec_balance = one.rec_balance || '0';
                        one.region_order_total = one.region_order_total || '0';
                        one.agent_time = one.agent_time || '2018-12-12 00:00:00';
                        role_info.push(one)
                    }
                    if(re6.test(roles)) {
                        let one = {...(this.formData.promote)};
                        // let one = this.formData.promote;
                        one.rate = one.rate || '0';
                        one.balance = one.balance || '0';
                        one.rec_balance = one.rec_balance || '0';
                        one.region_order_total = one.region_order_total || '0';
                        one.agent_time = one.agent_time || '2018-12-12 00:00:00';
                        role_info.push(one)
                    }
                    if(role_info.length > 0) {
                        body.role_info = JSON.stringify(role_info)
                    }
                }
                this.body = body;
                return true;
            },

            search() {
                if(!this.searchAccount) {
                    this.$Notice.error({
                        title: '错误',
                        desc: "请先填写上级账号",
                    });
                    this.formValidate.parent_id = '0';
                    return false
                }
                let body = {
                    account: this.searchAccount
                };
                api.searchAccount(body).then(res => {
                    if(res.data.code === 200) {
                        this.searchModel = true;
                        this.searchID = res.data.data.parent_id;
                        this.searchName = res.data.data.name;
                    }else {
                        this.$Notice.error({
                            title: '错误',
                            desc: res.data.msg,
                        });
                        this.formValidate.parent_id = '0';
                    }
                }).catch(err => {
                    this.$Notice.error({
                        title: '错误',
                        desc: '服务器开小差了，请稍后再试！',
                    });
                })
            },

            addID() {
                this.formValidate.parent_id = this.searchID;
            },

            roleChange() {
                let roles = this.selectedRoles.join(',');
                let re1 = new RegExp('省级代理');
                let re2 = new RegExp('市级代理');
                let re3 = new RegExp('县级代理');
                let re4 = new RegExp('合伙人');
                let re5 = new RegExp('个人代理');
                let re6 = new RegExp('推广员');
                if(re1.test(roles)) {
                    this.isProviceShow = true;
                }else {
                    this.isProviceShow = false;
                    this.formData.province = [];
                }
                if(re2.test(roles)) {
                    this.isTownShow = true;
                }else {
                    this.isTownShow = false;
                    this.formData.town = []
                }
                if(re3.test(roles)) {
                    this.isAreaShow = true
                }else {
                    this.isAreaShow = false;
                    this.formData.area = []
                }
                if(re4.test(roles)) {
                    this.isRateShow = true
                }else {
                    this.isRateShow  = false;
                    this.formData.partner = {
                        rate: '',
                        city_id: '10002',
                        territory: '中国',
                        role_id: '2',
                        balance: '',
                        rec_balance: '',
                        region_order_total: '',
                        agent_time: ''
                    }
                }
                if(re5.test(roles)) {
                    this.isSelfShow = true
                }else {
                    this.isSelfShow = false;
                    this.formData.self = {
                        rate: '',
                        city_id: '10006',
                        territory: '中国',
                        role_id: '6',
                        balance: '',
                        rec_balance: '',
                        region_order_total: '',
                        agent_time: ''
                    }
                }
                if(re6.test(roles)) {
                    this.isPromoteShow = true
                }else {
                    this.isPromoteShow = false
                    this.formData.promote = {
                        rate: '',
                        city_id: '10009',
                        territory: '中国',
                        role_id: '9',
                        balance: '',
                        rec_balance: '',
                        region_order_total: '',
                        agent_time: ''
                    }
                }
            },

            dateSet(e,item) {
                let date = e || '2018-12-12'
                item.agent_time = date + ' ' + '00:00:00';
            },

            addProvince() {
                let one = {
                    address: [],
                    rate: '',
                    role_id: '3',
                    balance: '',
                    rec_balance: '',
                    region_order_total: '',
                    agent_time: ''
                }
                this.formData.province.push(one)
            },

            minuProvince(i) {
                this.formData.province.splice(i,1);
            },

            addTown() {
                let one = {
                    address: [],
                    rate: '',
                    role_id: '4',
                    balance: '',
                    rec_balance: '',
                    region_order_total: '',
                    agent_time: ''
                }
                this.formData.town.push(one)
            },

            minuTown(i) {
                this.formData.town.splice(i,1);
            },

            addArea() {
                let one = {
                    address: [],
                    rate: '',
                    role_id: '5',
                    balance: '',
                    rec_balance: '',
                    region_order_total: '',
                    agent_time: ''
                }
                this.formData.area.push(one)
            },

            minuArea(i) {
                this.formData.area.splice(i,1);
            },

            //省市区
            getProvince() {
                let body = {
                    model: 'Provinces',
                    limit: 1000,
                    offset: 0,
                    orderBy: 'id asc'
                };
                //省
                api.getDataList(body).then(res => {
                    this.loading.isLoading = false;
                    let data = res.data.data.data;
                    // if(roleState === '3') {
                    for (const item of data) {
                        let one = {
                            value: item.province_name + ',' + item.id,
                            label: item.province_name,
                            id: item.id,
                            type: 0
                        };
                        this.province.push(one)
                    }
                    // }else {
                    for (const item of data) {
                        let area = {
                            value: item.province_name,
                            label: item.province_name,
                            id: item.id,
                            children: [],
                            loading: false,
                            type: 0
                        };
                        let town = {
                            value: item.province_name,
                            label: item.province_name,
                            id: item.id,
                            children: [],
                            loading: false,
                            type: 0
                        };
                        this.area.push(area);
                        this.town.push(town);
                    }
                    // }
                })
            },
            loadAreaData(item, callback) {
                this.loadData(1, item, callback);
            },

            loadTownData(item, callback) {
                this.loadData(2, item, callback);
            },

            loadData(status, item, callback) {
                item.loading = true;
                if (item.type === 0) {
                    let body = {
                        model: 'Citys',
                        limit: 1000,
                        offset: 0,
                        orderBy: 'id asc',
                        condition: {
                            province_id: item.id
                        }
                    };
                    //市
                    api.getDataList(body).then(res => {
                        let data = res.data.data.data;
                        let city = [];
                        if (status === 2) {
                            for (const citys of data) {
                                let one = {
                                    value: citys.city_name + ',' + citys.id,
                                    label: citys.city_name,
                                    id: citys.id,
                                    type: 1
                                };
                                city.push(one)
                            }
                        } else {
                            for (const citys of data) {
                                let one = {
                                    value: citys.city_name,
                                    label: citys.city_name,
                                    id: citys.id,
                                    children: [],
                                    loading: false,
                                    type: 1
                                };
                                city.push(one)
                            }
                        }
                        item.children = city;
                        item.loading = false;
                        callback();
                    })
                } else if (item.type === 1) {
                    let body = {
                        model: 'Areas',
                        limit: 1000,
                        offset: 0,
                        orderBy: 'id asc',
                        condition: {
                            city_id: item.id
                        }
                    };
                    //区
                    api.getDataList(body).then(res => {
                        let data = res.data.data.data;
                        let area = [];
                        for (const areas of data) {
                            let one = {
                                value: areas.area_name + ',' + areas.id,
                                label: areas.area_name,
                            };
                            area.push(one)
                        }
                        item.children = area;
                        item.loading = false;
                        callback();
                    })
                }

            },
        }  
    }
</script>


<style lang="less">
    @import '../../../assets/styles/constant.less';
    .dataEntry{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f7f9;
        .ivu-layout{
            min-height: 100%;
        }
        .header{
            font-size: 14px;
            line-height: 40px;
            height: 40px !important;
            color: #434343;
            padding: 0 50px;
            background-color: @background;
            border-bottom: 1px solid #ddd;
            .border-left {
                border-left: 5px solid @baseColor;
                margin-right: 4px;
            }
        }
        .content{
            width: 100%;
            min-height: 76%;
            padding: 20px 60px;
            .card-add{
                margin-top: 20px;
                .ivu-card-head{
                    background-color: #f2f2f2;
                }
                .ivu-card-body{
                    display: flex;
                    justify-content: space-around;
                }
                
            }
            .right .ivu-form-item-content {
                text-align: right;
                
            }
            .ivu-input[disabled] {
                color: #666;
            }
            
        }
        .copy-right{
            text-align: center;
            color: #aaa;
            font-size: 12px;
        }
    }
    #dataEntry {
        .ivu-form-item-content .el-checkbox-group{
            display: flex;
            flex-wrap: wrap;
            // justify-content: space-between;
            .el-checkbox--mini {
                margin-top: 0;
                margin-left: 0;
                margin-right: 10px;
                margin-bottom: 10px;
                width: 22%;
                min-width: 96px;
            }
        }
        .fead {
            transition: all 0.3s;
        }

        .fead.show {
            height: auto;
            margin-bottom: 24px;
            overflow: initial;
        }

        .hidden {
            height: 0;
            overflow: hidden;
            margin-bottom: 0;
        }
        .u_content {
            margin-left: 120px;
            display: flex;
            flex-wrap: wrap;
        }
        .u_input_box {
            display: flex;
            flex-wrap: wrap;
        }
        .u_input {
            width:200px;
            display: inline-block;
            margin-right: 4px;
            margin-bottom: 10px;
        }
        .addBtn {
            display: inline-block;
            border: 1px dashed #aaa;
            padding: 0 10px;
            height: 32px;
            cursor: pointer;
            margin-left: 10px;
        }
        .tips {
            color: red;
            margin-left: 10px;
        }
    }
</style>